<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.qizi{
				width:40px;
				height: 40px;
				background-color: pink;
				position: absolute;
				left: 83px;
				top:514px;
				border-radius:50% ;
				text-align: center;
				line-height: 40px;
				color: black;
				font-weight: bold;
				display: none;
				transition: all 1s;
			}
		</style>
	</head>
	<body>
		<div>
			<img src="images/xq.jpg" width="600px" id="pic"/>
		</div>
		<div id="qizi" class="qizi">車</div>
	</body>
	<script>
		var selectedQiZi;
		document.getElementById("qizi");
		document.getElementById("pic");
//		window.onclick=function(e){
//			console.log(e.pageX+" "+e.pageY)
//		}
		var str2s=["車","馬","相","仕","帥","仕","相","馬","車","炮","兵"]
		var x=0;
		for(var i=0;i<str2s.length-2;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			qz.style.top="60px";
			qz.style.transform="rotate(180deg)";
			qz.style.color="red";
			x=x+51;
			qz.innerHTML=str2s[i];
			document.body.appendChild(qz);
		}
		var x=0;
		for(var i=0;i<5;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			qz.style.top="210px";
			qz.style.transform="rotate(180deg)";
			qz.style.color="red";
			x=x+102;
			qz.innerHTML=str2s[str2s.length-1];
			document.body.appendChild(qz);
			
		}
		var x=51;
		for(var i=0;i<2;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			qz.style.top="160px";
			qz.style.transform="rotate(180deg)";
			qz.style.color="red";
			x=x+306;
			qz.innerHTML=str2s[str2s.length-2];
			document.body.appendChild(qz);
			
		}
		
		var str2s=["車","馬","象","士","将","士","象","馬","車","炮","卒"]
		var x=0;
		for(var i=0;i<str2s.length-2;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			x=x+51;
			qz.innerHTML=str2s[i];
			document.body.appendChild(qz);
		}
		var x=0;
		for(var i=0;i<5;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			qz.style.top="364px";
			x=x+102;
			qz.onclick=function(){
				this.style.background="yellow";
				selectedQiZi=this;
			}
			qz.innerHTML=str2s[str2s.length-1];
			document.body.appendChild(qz);
			
		}
		var x=51;
		for(var i=0;i<2;i++){
			var qz=qizi.cloneNode(true);
			qz.id="";
			qz.style.display="block";
			var qizileft=document.defaultView.getComputedStyle(qizi)["left"];
			qz.style.left=parseInt(qizileft)+x+"px";
			qz.style.top="416px";
			x=x+306;
			qz.innerHTML=str2s[str2s.length-2];
			document.body.appendChild(qz);	
		}
		
		document.onclick=function(e){
			if(e.target!=pic){
				return;
			}
			var x=e.pageX;
			var y=e.pageY;
			if(selectedQiZi){
			selectedQiZi.style.left=x-20+"px";
			selectedQiZi.style.top=y-20+"px";
			}
		}
		
		pic.onclick=function(e){
			console.log(e.pageX+" "+e.pageY);
		}
	</script>
</html>
